<template>
  <view class="my-wrapper">
    <!--头-->
    <view class="header">

      <view class="left">
        <image :src="userInfo.headimg" class="avatar" v-if="userInfo"></image>
        <view class="info" v-if="userInfo">
          <view class="name">{{ userInfo.nickname }}</view>
          <view class="vip">{{ userInfo.comName }}</view>
        </view>
      </view>
      <view class="right" @click="handleAskLeaveClick">
        <view class="contribution">
          <text>申请请假</text>
        </view>
      </view>

    </view>
    <!--服务-->
    <view class="service">
      <view class="item" @click="handleAccountClick">
        <view class="left">
          <text>个人信息</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleWagesClick">
        <view class="left">
          <text>我的工资</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleAchievementClick">
        <view class="left">
          <text>我的作品</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleCommentClick">
        <view class="left">
          <text>我的评价</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  name: "technician-info",
  data() {
    return {
      userInfo: null,
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.req.getUserInfoCheckMobile().then(res => {
        console.log(res)
        this.userInfo = res
      })
    },
    _onPullDownRefresh() {
      this.getInfo();
    },
    handleAccountClick() {
      uni.navigateTo({url: `/pages/index/my/technician/account/index`})
    },
    handleAskLeaveClick() {
      uni.navigateTo({url: `/pages/index/my/technician/ask-leave/index`})
    },
    handleWagesClick() {
      uni.navigateTo({url: `/pages/index/my/technician/wages/index`})
    },
    handleAchievementClick() {
      uni.navigateTo({url: `/pages/index/my/technician/achievement/index/index`})
    },
    handleCommentClick() {
      uni.navigateTo({url: `/pages/index/my/technician/comment/index`})
    },
  },
}
</script>

<style scoped lang='scss'>
.header {
  background-color: #262A3D;
  height: r(300px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
  position: relative;

  & > .left {
    padding-left: r(27px);
    display: flex;

    .avatar {
      height: r(97px);
      width: r(97px);
      border-radius: 50%;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      color: white;
      margin-left: r(25px);

      .name {
        font-size: r(30px);
      }

      .vip {
        font-size: r(20px);
        font-weight: 400;
        border-radius: r(50px);
        border: 1px solid #D7D7D7;
        padding: r(0 10px);
      }
    }
  }

  .right {

    .contribution {
      background: linear-gradient(90deg, #FFF26E, #FFD025);
      border-radius: r(25px 0 0 25px);
      padding: r(15px 44px 15px 30px);
      font-size: r(22px);
      color: #CA9300;
    }
  }
}

.service {
  background-color: white;

  .title {
    margin-top: r(10px);
    margin-left: r(30px);
    font-size: r(30px);
    font-weight: 500;
    color: #313131;
  }

  .item {
    padding: r(30px);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & + .item {
      border-top: 1px solid #f5f5f5;
    }

    .cuIcon-right {
      color: #B5B5B5;
    }

    .left {
      display: flex;
      align-items: center;
      font-size: r(28px);
      color: #4F4F4F;

      .icon {
        width: r(30px);
        margin-right: r(20px);
      }
    }
  }
}

.grid-actions {

  .action {
    height: r(180px);
    width: r(180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: r(40px);
    }
  }

}

</style>